<script lang="ts" setup>
import { report } from '@/libs/request'
import { safeArea } from '@/libs/config'

const top = safeArea.top2 + 'rpx'
const height = `calc(100% - ${safeArea.top2 + safeArea.bottom + 180}rpx)`

const onClick = () => report('online_service', { type: 'global' })
</script>

<template>
  <movable-area class="online-service">
    <movable-view
      direction="all"
      x="20"
      y="600"
    >
      <button
        class="btn"
        open-type="contact"
        @click="onClick"
      >{{ '专属\n客服' }}</button>
    </movable-view>
  </movable-area>
</template>

<style lang="less" scoped>
.online-service {
  position: fixed;
  top: v-bind(top);
  left: 0;
  width: calc(100% - 80rpx);
  height: v-bind(height);

  pointer-events: none;

  z-index: 100;

  .btn {
    width: 96rpx;
    height: 96rpx;

    background-color: #FF8E32;

    border-radius: 50%;

    display: flex;
    justify-content: center;
    align-items: center;

    color: #fff;
    font-size: 28rpx;
    line-height: 32rpx;
    white-space: pre;

    pointer-events: all;
  }
}
</style>